1<template>
    <div>
        <el-dialog title="人员编辑器" :visible.sync="adminEditerData.show" width="700px" center :close-on-click-modal='false' @open='openEditer' top="50px">
            <el-form v-loading='loading' label-position="right" label-width="150px" size="mini" :model='adminEditerData.admin' :rules='rules' ref="adminForm">
                <el-form-item label="工号" prop='jobNum'>
                    <el-input v-model.trim="adminEditerData.admin.jobNum"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop='name'>
                    <el-input v-model.trim="adminEditerData.admin.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop='sex'>
                    <el-radio v-model="adminEditerData.admin.sex" label="男">男</el-radio>
                    <el-radio v-model="adminEditerData.admin.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="角色" prop='ruleId'>
                    <el-select v-model="adminEditerData.admin.ruleId" placeholder="请选择">
                        <el-option v-for="item in adminEditerData.ruleList" :key="item.id" :label="item.name" :value="item.id" v-show="item.id!='guest'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机" prop='mobile'>
                    <el-input v-model.trim="adminEditerData.admin.mobile"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop='address'>
                    <el-input v-model.trim="adminEditerData.admin.address"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop='joinDate'>
                    <el-date-picker v-model="adminEditerData.admin.joinDate" type="date" placeholder="选择日期" :editable="false"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer">
              <el-button @click="adminEditerData.show=false" size="small">取消</el-button>
              <el-button type="primary" @click="onsubmit" size="small">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'AdminEditer',
    data(){
        var checkJobNum=(rule,value,callback)=>{
            if(!value){
                callback(new Error("工号不能为空"));
                return;
            }
            var params=new URLSearchParams();
            params.append("jobNum",value);
            params.append("id",this.adminEditerData.admin.id);
            this.$http.post(this.$store.state.url+"/form/unique/jobnum",params).then(
                response=>{
                    if(response.data.status==200)callback();
                    else callback(new Error(response.data.message));
                }
            ).catch();
        };
        var checkMobile=(rule,value,callback)=>{
            //var rex=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9])\d{8}$/;
            var rex=/^1\d{10}$/;
            if(!value)callback(new Error("手机号不能为空"));
            //else if(value.match(rex)==null)callback(new Error("请输入正确的手机号"));
            else callback();
        };
        return {
            loading:false,
            rules:{
                jobNum:[
                    {required: true,validator:checkJobNum, trigger: 'blur' }
                ],
                name:[
                    {required: true,message:"员工姓名不能为空", trigger: 'blur' }
                ],
                ruleId:[
                    {required: true,message:"请选择人员角色", trigger: 'change' }
                ],
                mobile:[
                    {required: true,validator:checkMobile, trigger: 'blur' }
                ],
                joinDate:[
                    {required: true,type:'date',message:"请选择人员入职日期", trigger: 'change' }
                ]
            }
        };
    },
    methods:{
        onsubmit:function(){
            if(this.loading)return;
            this.loading=true;
            this.$refs.adminForm.validate(
                valid=> {
                    if(valid)this.submitExecute();
                    else this.loading=false;
                }
            );
        },
       submitExecute:function(){
           var params = new URLSearchParams();
           for(var key in this.adminEditerData.admin){
                params.append(key,this.adminEditerData.admin[key]);
            }
            this.$http.post(this.$store.state.url+"/admin/save",params).then(
                response=>{
                    if(response.data.status==200){
                        this.$message({message: '保存成功',type: 'success'});
                        this.$emit('adminEdited',response.data.data);
                    }else{
                        this.$message.error(response.data.message);
                    }
                    this.loading=false;
                }
            ).catch();
       },
        editerInit:function(){
            this.adminEditerData.admin={
                id:'',
                jobNum:'',
                name:'',
                ruleId:'',
                sex:'男',
                mobile:'',
                address:'',
                joinDate:''
            };
        },
        openEditer:function(){
            this.loading=true;
            if(this.$refs.adminForm!=null)this.$refs.adminForm.resetFields();
            if(this.adminEditerData.admin.id==""){
                this.editerInit();
                this.loading=false;
            }else{
                this.$http.post(this.$store.state.url+"/admin/info","id="+this.adminEditerData.admin.id).then(
                    response=>{
                        if(response.data.status==200){
                            this.adminEditerData.admin=response.data.data;
                            this.adminEditerData.admin.joinDate=new Date(this.adminEditerData.admin.joinDate);
                            this.loading=false;
                        }else{
                            this.$message.error(response.data.message);
                            this.loading=false;
                            this.adminEditerData.show=false;
                        }
                    }
                ).catch();
            }
        },
    },
    props:["adminEditerData"]
}
</script>

<style scoped>
.el-input{
    width:300px
}
</style>
